<template>
    <div :style="{marginTop:$store.state.navbarHeight+6+'px'}">
        <Navbar bgColor="bg-gradual-pink" title="مارس كىنوخانىسى" :showIcon="true" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="title">{{info.title}}</div>
            <div class="cover">
                <img mode="aspectFill" :src="info.coverImg" alt="">
            </div>
            <div class="notice">
                بۇ مەزمۇن ۋاقتىنچە ھەقلىق
            </div>
            <div class="price">
                {{Number(info.price)}} يۈەن
            </div>
            <div class="btn">
                <div class="btn-btn" @click="toBuy">سېتىۋېلىش</div>
            </div>
        </div>
        <i-toast id="toast" />
    </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import { mapGetters } from "vuex";
import { $orderNumber, $Toast, Base64, _decrypt } from "@/utils/index";
export default {
    components: {
        Navbar
    },
    data() {
        return {
            info: {}
        };
    },
    beforeMount() {
        if (this.$store.state.systemInfo.platform == "ios") {
            wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
            wx.showToast({
                title: "付费内容暂未向IOS用户开放", //提示的内容,
                icon: "none", //图标,
                duration: 2000, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {}
            });
        }
    },
    methods: {
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        toBuy() {
            let orderId = $orderNumber(),
                openId = this.$store.state.userInfo.openId,
                payAmount = Math.round(this.info.price * 100);
            this.$http
                .post("/wxPay", { orderId, openId, total_fee: payAmount })
                .then(res => {
                    let { nonceStr, paySign, signType, timeStamp } = res;
                    var pack = res.package;
                    let userInfo = {
                        uid: this.$store.state.userInfo.uid,
                        vid: this.info.vid,
                        orderId,
                        openId,
                        payAmount
                    };
                    wx.requestPayment({
                        timeStamp, //时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间,
                        nonceStr, //随机字符串，长度为32个字符以下,
                        package: pack, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*,
                        signType, //签名算法，暂支持 MD5,
                        paySign, //签名,具体签名方案参见小程序支付接口文档,
                        success: res => {
                            let decodeStr = Base64.encode(
                                JSON.stringify(userInfo)
                            );
                            decodeStr = decodeStr
                                .replace(/A/g, "&")
                                .replace(/B/g, "%");
                            this.$http
                                .post("/mpBuyVideo", { decodeStr })
                                .then(result => {
                                    if (result.code == "001") {
                                        $Toast({
                                            icon: "success",
                                            content:
                                                "مۇۋەپپەقىيەتلىك سېتىۋالدىڭىز",
                                            mask: true
                                        });
                                        setTimeout(() => {
                                            $Toast.hide();
                                            wx.navigateBack({
                                                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                                            });
                                        }, 700);
                                    } else {
                                        wx.setClipboardData({
                                            data: "13122060027"
                                        });
                                        $Toast({
                                            content:
                                                "مەغلۇپ بولدى ،  ئۈندىدار كۆچۈرۈلدى ، بىز بىلەن ئالاقىلىشىڭ"
                                        });
                                        setTimeout(() => {
                                            $Toast.hide();
                                        }, 3000);
                                    }
                                });
                        },
                        fail: () => {
                            $Toast({
                                icon: "warning",
                                content: "مەغلۇپ بولدى"
                            });
                        },
                        complete: () => {}
                    });
                });
        }
    },
    mounted() {
        let info = this.$store.state.currVideoInfo;
        this.info = info;
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    border: 1px solid transparent;
    width: 96%;
    margin: 0 auto;
    .title,
    .notice,
    .price {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #414141;
        height: 120rpx;
        width: 100%;
        font-size: 33rpx;
        margin-top: 20rpx;
    }
    .cover {
        box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 30rpx;
        width: 90%;
        height: 300rpx;
        overflow: hidden;
        margin: 0 auto;

        img {
            width: 100%;
            height: 100%;
        }
    }
    .notice {
        color: #f41;
        height: 100rpx;
    }
    .price {
        margin: 0;
        color: #0fb2e4;
        height: 60rpx;
        direction: rtl;
    }
    .btn {
        width: 100%;
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &-btn {
            width: 300rpx;
            height: 70rpx;
            background-color: #04ad3c;
            border-radius: 12rpx;
            color: #eee;
            text-align: center;
            line-height: 70rpx;
            font-size: 33rpx;
        }
    }
}
</style>